.shouye {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../images/bg1.png) no-repeat;
  background-size: 100%; }
  .shouye .bg {
    width: 100%;
    position: absolute;
    z-index: -1; }
  .shouye .img-kugou {
    width: 16.09375%;
    position: absolute;
    left: 6.875%;
    top: 3.87324%; }
  .shouye .img-t1 {
    width: 59.375%;
    position: absolute;
    left: 19.6875%;
    top: 14.26056%; }
  .shouye .img-t2 {
    width: 88.75%;
    position: absolute;
    left: 3.59375%;
    top: 19.10211%; }
  .shouye .img-t3 {
    width: 54.6875%;
    position: absolute;
    left: 23.125%;
    top: 32.04225%; }
  .shouye .img-t4 {
    width: 53.4375%;
    position: absolute;
    left: 24.0625%;
    top: 38.64437%; }
  .shouye .img-yun1 {
    width: 12.1875%;
    position: absolute;
    left: 6.40625%;
    top: 35.47535%; }
  .shouye .img-yun2 {
    width: 8.59375%;
    position: absolute;
    left: 81.875%;
    top: 38.29225%; }
  .shouye .img-yun3 {
    width: 8.59375%;
    position: absolute;
    left: 71.71875%;
    top: 47.71127%; }
  .shouye .img-yun4 {
    width: 5.78125%;
    position: absolute;
    left: 74.0625%;
    top: 55.72183%; }
  .shouye .img-yun5 {
    width: 8.59375%;
    position: absolute;
    left: 83.28125%;
    top: 53.69718%; }
  .shouye .img-yueqiu {
    width: 27.34375%;
    position: absolute;
    left: 63.125%;
    top: 44.89437%; }
  .shouye .img-qipao1 {
    position: absolute;
    width: 14.53125%;
    left: 7.5%;
    top: 56.95423%; }
  .shouye .img-qipao1 {
    position: absolute;
    width: 14.53125%;
    left: 7.5%;
    top: 56.95423%; }
  .shouye .img-qipao2 {
    position: absolute;
    width: 23.4375%;
    left: 69.84375%;
    top: 57.83451%; }
  .shouye .img-qipao3 {
    position: absolute;
    width: 20%;
    left: 5.3125%;
    top: 79.22535%; }
  .shouye .img-qipao4 {
    position: absolute;
    width: 14.53125%;
    left: 76.875%;
    top: 78.08099%; }
  .shouye .img-people1 {
    position: absolute;
    width: 52.03125%;
    left: 22.03125%;
    top: 50.17606%; }
  .shouye .img-input1 {
    position: absolute;
    width: 26.5625%;
    left: 36.25%;
    top: 88.38028%; }

.pages {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../images/bg1.png) no-repeat;
  background-size: 100%; }
  .pages .img-yun1 {
    width: 17.5%;
    position: absolute;
    left: 5.15625%;
    top: 42.25352%; }
  .pages .img-yun2 {
    width: 9.84375%;
    position: absolute;
    left: 70.625%;
    top: 43.30986%; }
  .pages .img-yun3 {
    width: 17.5%;
    position: absolute;
    left: 87.96875%;
    top: 39.26056%; }
  .pages .img-yun4 {
    width: 9.375%;
    position: absolute;
    left: 60.9375%;
    top: 40.49296%; }
  .pages .img-yun5 {
    width: 9.375%;
    position: absolute;
    left: 30.46875%;
    top: 36.97183%; }
  .pages .input {
    width: 57.5%;
    height: 5.72183%;
    position: absolute; }
    .pages .input p {
      padding-left: 15px;
      padding-top: 7px;
      color: #000000;
      font-size: 13px; }
  @media screen and (min-width: 300px) and (max-width: 375px) {
    .pages .input p {
      padding-top: 7px;
      padding-left: 19px;
      color: #000000;
      font-size: 14px;
      letter-spacing: -1px; } }
  @media screen and (min-width: 300px) and (max-width: 360px) {
    .pages .input p {
      padding-top: 5px;
      padding-left: 19px;
      color: #000000;
      font-size: 14px;
      letter-spacing: -1px; } }
  @media screen and (min-width: 300px) and (max-width: 320px) {
    .pages .input p {
      padding-top: 5px;
      padding-left: 19px;
      color: #000000;
      font-size: 12px;
      letter-spacing: -1px; } }
  @media screen and (min-width: 414px) {
    .pages .input p {
      padding-top: 7px;
      padding-left: 19px;
      color: #000000;
      font-size: 14px; } }
  @media screen and (min-width: 768px) {
    .pages .input p {
      padding-top: 12px;
      padding-left: 19px;
      color: #000000;
      font-size: 21px; } }
  .pages .input-1 {
    left: 8.59375%;
    top: 60.03521%;
    background: url(../images/input-2_22.png) no-repeat;
    background-size: contain; }
  .pages .input-2 {
    left: 8.59375%;
    top: 67.95775%;
    background: url(../images/input-2_22.png) no-repeat;
    background-size: contain; }
  .pages .input-3 {
    left: 8.59375%;
    top: 75.88028%;
    background: url(../images/input-2_22.png) no-repeat;
    background-size: contain; }
  .pages .input-4 {
    left: 8.59375%;
    top: 83.80282%;
    background: url(../images/input-2_22.png) no-repeat;
    background-size: contain; }
  .pages .img-music-1 {
    width: 12.5%;
    position: absolute;
    left: 83.59375%;
    top: 63.82042%; }
  .pages .img-music-2 {
    width: 6.25%;
    position: absolute;
    left: 90.625%;
    top: 73.94366%; }
  .pages .img-music-3 {
    width: 6.25%;
    position: absolute;
    left: 90%;
    top: 79.92958%; }
  .pages .img-music-4 {
    width: 7.1875%;
    position: absolute;
    left: 86.875%;
    top: 84.33099%; }
  .pages .img-music-5 {
    width: 8.125%;
    position: absolute;
    left: 87.1875%;
    top: 88.55634%; }
  .pages .img-dog-1 {
    width: 12.96875%;
    position: absolute;
    left: 74.53125%;
    top: 84.77113%; }
  .pages input {
    display: none; }
  .pages input[name="input-1"]:checked ~ .input-1 {
    background: url(../images/input-1_12.png) no-repeat;
    background-size: contain; }
  .pages input[name="input-2"]:checked ~ .input-2 {
    background: url(../images/input-1_12.png) no-repeat;
    background-size: contain; }
  .pages input[name="input-3"]:checked ~ .input-3 {
    background: url(../images/input-1_12.png) no-repeat;
    background-size: contain; }
  .pages input[name="input-4"]:checked ~ .input-4 {
    background: url(../images/input-1_12.png) no-repeat;
    background-size: contain; }

.page-1 .page1 {
  width: 100%;
  position: absolute;
  top: 9.15493%; }
  .page-1 .page1 p {
    text-align: center;
    color: #ffffff;
    font-size: 16px; }

.page-1 .img-people2 {
  width: 39.0625%;
  position: absolute;
  top: 15.84507%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.page-2 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-2 .img-people2 {
  width: 32.96875%;
  position: absolute;
  top: 24.11972%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%); }

.page-3 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-3 .img-people2 {
  width: 52.5%;
  position: absolute;
  left: 21.25%;
  top: 23.41549%; }

.page-4 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-4 .img-people2 {
  width: 38.125%;
  position: absolute;
  left: 32.5%;
  top: 28.69718%; }

.page-5 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-5 .img-people2 {
  width: 54.6875%;
  position: absolute;
  left: 23.125%;
  top: 23.23944%; }

.page-6 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-6 .img-people2 {
  width: 52.65625%;
  position: absolute;
  left: 24.375%;
  top: 21.83099%; }

.page-7 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-7 .img-people2 {
  width: 52.65625%;
  position: absolute;
  left: 24.375%;
  top: 21.83099%; }

.page-8 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-8 .img-people2 {
  width: 39.21875%;
  position: absolute;
  left: 31.71875%;
  top: 15.58099%; }

.page-9 .page1 {
  width: 77.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-9 .img-people2 {
  width: 39.21875%;
  position: absolute;
  left: 31.71875%;
  top: 15.58099%; }

.page-10 .page1 {
  width: 71.875%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-10 .img-people2 {
  width: 39.6875%;
  position: absolute;
  left: 31.25%;
  top: 19.98239%; }

.page-11 .page1 {
  width: 62.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-11 .img-people2 {
  width: 39.375%;
  position: absolute;
  left: 31.5625%;
  top: 15.9331%; }

.page-12 .page1 {
  width: 77.1875%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-12 .img-people2 {
  width: 50%;
  position: absolute;
  left: 22.8125%;
  top: 19.19014%; }

.page-13 .page1 {
  width: 56.25%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-13 .img-people2 {
  width: 39.375%;
  position: absolute;
  left: 31.40625%;
  top: 20.15845%; }

.page-14 .page1 {
  width: 76.71875%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-14 .img-people2 {
  width: 39.375%;
  position: absolute;
  left: 31.40625%;
  top: 25.17606%; }

.page-15 .page1 {
  width: 65.625%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-15 .img-people2 {
  width: 44.0625%;
  position: absolute;
  left: 28.75%;
  top: 16.5493%; }

.page-16 .page1 {
  width: 65.78125%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-16 .img-people2 {
  width: 51.875%;
  position: absolute;
  left: 22.65625%;
  top: 17.78169%; }

.page-17 .page1 {
  width: 78.90625%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-17 .img-people2 {
  width: 55.3125%;
  position: absolute;
  left: 23.75%;
  top: 20.07042%; }

.page-18 .page1 {
  width: 61.25%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-18 .img-people2 {
  width: 39.375%;
  position: absolute;
  left: 31.5625%;
  top: 19.71831%; }

.page-19 .page1 {
  width: 62.5%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-19 .img-people2 {
  width: 35.625%;
  position: absolute;
  left: 31.25%;
  top: 19.89437%; }

.page-20 .page1 {
  width: 61.25%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-20 .img-people2 {
  width: 39.375%;
  position: absolute;
  left: 31.25%;
  top: 17.25352%; }

.page-21 .page1 {
  width: 52.1875%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-21 .img-people2 {
  width: 46.25%;
  position: absolute;
  left: 28.125%;
  top: 16.02113%; }

.page-22 .page1 {
  width: 70.625%;
  position: absolute;
  left: 7.03125%;
  top: 8.62676%; }

.page-22 .img-people2 {
  width: 58.90625%;
  position: absolute;
  left: 21.5625%;
  top: 20.68662%; }

.page-22 .input {
  text-align: center; }
